<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'Model',
        data() {
            return {}
        },
        mounted() {
            this.initCesium();
            this.addModel();
        },
        methods: {
            initCesium() {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: true,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: true,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    }),
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
            },
            addModel() {
                //使用模型矩阵定义模型的位置
                const origin = Cesium.Cartesian3.fromDegrees(105.0, 40.0, 0.0);
                const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
                //加载模型
                const model = this.viewer.scene.primitives.add(Cesium.Model.fromGltf({
                    url: 'http://localhost:8888/model//models/gltf/Soldier.glb',
                    show: true,                     // default
                    modelMatrix: modelMatrix,
                    scale: 1000000.0,                   // double size
                    minimumPixelSize: 128,          // never smaller than 128 pixels
                    maximumScale: 2000000000,             // never larger than 20000 * model size (overrides minimumPixelSize)
                    runAnimations: true,//指定是否应启动模型中指定的glTF动画
                    clampAnimations: true,//指定glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势
                    credit: new Cesium.Credit(
                        '<a href="https://cesium.com/" target="_blank">机器人</a>', true
                    ),
                    showCreditsOnScreen: true
                }));

                model.readyPromise.then((model) => {
                    //添加动画帧
                    model.activeAnimations.addAll();
                    console.log(model)
                    //获取到某个名字的材质
                    let material = model.getMaterial("VanguardBodyMat");
                    console.log(material)
                    //获取到某个名字的网格模型
                    let mesh = model.getMesh("vanguard_Mesh");
                    console.log(mesh)
                    //获取到某个名字的关节
                    let node = model.getNode("vanguard_Mesh");
                    console.log(node)
                    //使用模型矩阵对关节进行缩放操作
                    node.matrix = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(2.0, 2.0, 1.0), node.matrix);
                });
                this.viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(105.0, 40.0, 500.0), // 设置位置
                    orientation: {
                        heading: Cesium.Math.toRadians(20.0), // 方向
                        pitch: Cesium.Math.toRadians(-90.0),// 倾斜角度
                        roll: 0
                    }
                })

                let handler = this.viewer.screenSpaceEventHandler;
                //左键点击事件
                handler.setInputAction( (event) =>{
                    //用来拾取三维空间中的物体
                    let pickedFeature = this.viewer.scene.pick(event.position);
                    if (!Cesium.defined(pickedFeature)) {
                        console.log("nothing picked")
                        return;
                    }
                    console.log(pickedFeature)
                },Cesium.ScreenSpaceEventType.LEFT_CLICK)
            }
        },

    }
</script>

